import { Component } from '@angular/core';
import {
  IonicPage,
  NavController,
  NavParams,
  ToastController,
  ActionSheetController,
} from 'ionic-angular';
import { BaseUI } from '../../../common/baseUI';
import {
  FileTransfer,
  FileTransferObject,
  FileUploadOptions
} from '@ionic-native/file-transfer';
import { Camera, CameraOptions } from '@ionic-native/camera';
import { LoadingController } from 'ionic-angular';


@IonicPage()
@Component({
  selector: 'page-updata-info',
  templateUrl: 'updata-info.html'
})
export class UpdataInfoPage extends BaseUI {
  nickname: string = ''; // 昵称
  realname: string = ''; // 真名
  classes: string = ''; // 班级
  qq: string = ''; // QQ号码
  cucumber: boolean; // checkbox是否选中

  // 相机参数
  avatar: string = './assets/updataInfo/b3-2@2x.png'; // 路径
  // ionic native File Transfer
  fileTransfer: FileTransferObject = this.transfer.create();

  // 接收电话
  tel: string = '';

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public toastCtrl: ToastController,
    private camera: Camera,
    private transfer: FileTransfer,
    public actionSheetCtrl: ActionSheetController,
    // private filePath: FilePath,
    public loadingCtrl: LoadingController,
  ) {
    super();
    this.tel = this.navParams.get('tel');
    console.log('tel',this.tel)
  }

  ionViewDidLoad() {
  }

  // 验证昵称
  checkNickname() {
    if (this.nickname.trim().length < 1) {
      return this.showToast(this.toastCtrl, '昵称不能为空');
    }
  }

  // 验证名字
  checkRealname() {
    const pattern = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/;
    if (!pattern.test(this.realname)) {
      this.showToast(this.toastCtrl, '请输入正确的姓名');
    }
  }

  // 验证班级
  checkClasses() {
    if (this.classes.length === 0) {
      this.showToast(this.toastCtrl, '班级不能为空');
    } else if (this.classes.length < 5) {
      this.showToast(this.toastCtrl, '请输入正确的班级');
    }
  }

  // 验证QQ
  checkQQ() {
    if (this.qq.length < 6 || this.qq.length > 10) {
      this.showToast(this.toastCtrl, '请输入正确的QQ号码');
    }
  }

  // 判定checkbox
  updateCucumber() {
    return this.cucumber;
  }

  upImg() {}

  // 完成注册
  complete() {
    if (this.updateCucumber()) {
      this.navCtrl.push('WdPage');
    } else {
      this.showToast(this.toastCtrl, '请同意条款完成注册');
    }
  }


  // 定义图片
  takePicture(sourceType) {
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE, //
      saveToPhotoAlbum: true, // 是否保存到相册
      sourceType: sourceType, // 图片来源 
    };
    this.camera.getPicture(options).then(
      // 成功的回调函数
      imageData => {
        // imageData is either a base64 encoded string or a file URI
        // If it's base64 (DATA_URL):
        let base64Image = './data:image/jpeg;base64,' + imageData;
        this.avatar = base64Image;
        this.showToast(this.toastCtrl, this.avatar);
        // this.upload();
      },
      // 失败的回调函数
      err => {
        // Handle error
        console.log(err);
      }
    );
  }

  // 打开相机 上传下载文件
  openCamera() {
    let actionSheet = this.actionSheetCtrl.create({
      title: '上传图片',
      buttons: [
        {
          text: '从图片库中选择',
          handler: () => {
            this.takePicture(this.camera.PictureSourceType.PHOTOLIBRARY);
          }
        },
        {
          text: '使用相机',
          handler: () => {
            this.takePicture(this.camera.PictureSourceType.CAMERA);
          }
        },
        {
          text: '取消',
          role: 'cancel'
        }
      ]
    });
    actionSheet.present();
  }

  // 上传图片
  upload() {
    const apiPath = '';

    let options: FileUploadOptions = {
      fileKey: 'file',
      fileName: 'pcAvatar.jpg',   //文件名称
      headers: {}, // 请求头 
      params: {'fileName': this.tel, 'userid':this.tel},
    };

    // 上传图片 ()
    this.fileTransfer.upload(this.avatar, apiPath, options)
      .then((data) => {
        console.log(data);

      }, (err) => {
        console.log(err);
      });
  }


}
